<template>
    <div>
        <a-page-header
                style="border: 1px solid rgb(235, 237, 240)"
                title="DEMAND-APPLICATION"
                sub-title="需求申请"
        />
        <a-form style="margin: 30px 200px" layout="vertical" :model="detail">
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item
                            label="机构名称"
                            name="title">
                        <a-input :disabled="true" v-model:value="office.name"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="8">
                    <a-form-item
                            v-bind="validateInfos.wasteTypeId"
                            label="废品类型"
                            name="wasteTypeId">
                        <a-select
                                ref="select"
                                v-model:value="detail.wasteTypeId"
                                placeholder="请选择"
                                :options="wasteTypeList"
                                @change="handlerSelected"
                                :field-names="{label:'name',value:'id'}"
                        ></a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item
                            v-bind="validateInfos.wasteId"
                            label="废品"
                            name="wasteId">
                        <a-select
                                ref="select"
                                :disabled="detail.wasteTypeId == ''"
                                v-model:value="detail.wasteId"
                                placeholder="请选择"
                                :options="wasteList"
                                :field-names="{label:'name',value:'id'}"
                        ></a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item
                            v-bind="validateInfos.weight"
                            label="重量(吨)"
                            name="weight">
                        <a-input-number v-model:value="detail.weight"
                                        :disabled="detail.wasteId == ''"
                                        :min="0"/>
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="16">
                <a-col :span="8">
                    <a-form-item
                            v-bind="validateInfos.component"
                            label="主害成份"
                            name="component">
                        <a-input :disabled="detail.wasteId == ''" v-model:value="detail.component"/>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item
                            v-bind="validateInfos.morphological"
                            label="废品形态"
                            name="morphological">
                        <a-input :disabled="detail.wasteId == ''" v-model:value="detail.morphological"/>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item
                            v-bind="validateInfos.packaging"
                            label="包装方式"
                            name="packaging">
                        <a-input :disabled="detail.wasteId == ''" v-model:value="detail.packaging"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item>
                        <a-space>
                            <a-button type="primary" @click="submitOk">
                                提交申请
                            </a-button>
                            <a-button type="default" @click="resetFields">
                                重置
                            </a-button>
                        </a-space>

                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </div>
</template>

<script>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {message,Form} from 'ant-design-vue'
    import cookies from 'js-cookie'
    import {useRouter} from 'vue-router'
    export default {
        name: "order-demandApplication",
        setup() {
            const detail = ref({
                wasteTypeId: '',
                wasteId: '',
                component: undefined,
                weight: '',
                morphological: undefined,
                packaging: undefined
            })
            const loginUser = ref({})
            const office = ref({})
            const wasteTypeList = ref([])
            const wasteList = ref([])
            const router = useRouter()
            const useForm = Form.useForm
            const {validate, validateInfos, resetFields} = useForm(detail, {
                wasteTypeId: [{required: true, message: '请选择废品类型', trigger: ['submit','change']}],
                wasteId: [{required: true, message: '请选择废品', trigger: ['submit','change']}],
                component: [{required: true, message: '请输入主害成份', trigger: ['submit','change']}],
                weight: [{required: true, message: '请输入重量', trigger: ['submit','change']}],
                morphological: [{required: true, message: '请输入废品形态', trigger: ['submit','change']}],
                packaging: [{required: true, message: '请输入废品包装方式', trigger: ['submit','change']}],
            })

            const submitOk = () => {
                validate().then(()=>{
                    if (office.value.roles == undefined || office.value.roles.indexOf('1') == -1) {
                        message.error("所属机构无产废方资质，无法提交申请")
                    }else {
                        detail.value.createUserId = loginUser.value.id
                        axios.post('/detailProcess/startDetailProcess',detail.value).then(rs=>{
                            console.log("申请结果",rs)
                            if (rs.data.code == 200){
                                message.success("采购申请提交成功")
                                resetFields()
                            }else {
                                message.error(rs.data.message)
                            }
                        })
                    }
                }).catch(()=>{
                    console.log("校验失败")
                })
            }

            const handlerSelected = (value) =>{
                axios.get('/waste/queryByWasteTypeId/' + value).then(rs=>{
                    wasteList.value = rs.data.data
                })
            }

            onMounted(()=>{
                loginUser.value = JSON.parse(cookies.get("user"))
                axios.get('sys-office/queryById/' + loginUser.value.officeId).then(rs=>{
                    office.value = rs.data.data
                })
                axios.get('waste-type/queryAll').then(rs=>{
                    wasteTypeList.value = rs.data.data
                })
            })
            return {
                office,
                wasteTypeList,
                wasteList,
                detail,
                submitOk,
                validateInfos,
                resetFields,
                handlerSelected,
            }
        }
    }
</script>

<style scoped>

</style>